<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData" @getSelectionRows="getSelectionRows">
      <template #leftBar>
        <vo-select :options="data.sysTaskGroup" v-model:value="data.search.groupId" lab="groupName" val="groupId" placeholder="请选择任务组" />
        <tiny-input v-model="data.search.taskName" placeholder="任务名称"></tiny-input>
        <tiny-button type="primary" @click="querySysTask">查询</tiny-button>
      </template>
      <template #rightBar>
        <tiny-button-group class="ml-4">
          <tiny-button @click="addTask">新增</tiny-button>
          <tiny-button @click="delBatch">删除</tiny-button>
        </tiny-button-group>
      </template>
      <template v-slot:taskStatus="{scopeData}">
        <tiny-switch
          v-model="scopeData.row.taskStatus"
          class="tablescope"
          @change="changeIsRun(scopeData.row.taskStatus, scopeData.row, scopeData.row.rowIndex - 1)"
          active-value="1"
          inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </tiny-switch>
      </template>
      <template v-slot:handleSlot="{scopeData}">
        <tiny-button-group v-for="item in data.buttons" class="buttons">
          <tiny-tooltip placement="bottom" effect="dark">
            <template #content> {{ item.name }}</template>
            <tiny-button text size="small" @click="handle(item.type, scopeData.row, scopeData.row.rowIndex - 1)">
              <yu-icon :iconName="item.icon" />
            </tiny-button>
          </tiny-tooltip>
        </tiny-button-group>
      </template>
    </vo-table>
    <vo-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <task-edit :editData="data.editData" v-model:isShow="data.isShow"></task-edit>
    </vo-dialog>
  </div>
</template>

<script setup>
  import {reactive, ref, getCurrentInstance, onMounted} from 'vue';
  import TaskEdit from './TaskEdit.vue';
  const {proxy} = getCurrentInstance();
  const data = reactive({
    search: {},
    sysTaskGroup: [],
    tableData: {data: [], cols: [], tableArrts: {haspage: true}},
    editData: {},
    dialogConfig: {width: '60%'},
    isShow: false,
    buttons: [],
  });
  const addTask = () => {
    data.dialogConfig.title = '新增';
    data.isShow = true;
    data.editData = {};
  };
  onMounted(() => {
    //菜单查询
    getSysTaskGroup();
  });
  const getSysTaskGroup = async () => {
    data.sysTaskGroup = await proxy.$api.system.getSysTaskGroupDict();
  };
  const querySysTask = async () => {
    data.tableData.data = await proxy.$api.system.querySysTask(data.search);
  };
  data.tableData.cols = [
    {title: '任务', key: 'taskName', width: 120, tooltip: true},
    {title: '任务组名', key: 'groupId', align: 'center'},
    {title: '执行表达式', key: 'taskCron', tooltip: true},
    {title: '调用类型', key: 'taskType', tooltip: true},
    {title: '执行状态', key: 'taskStatus', slot: 'taskStatus', tooltip: true},
    {title: '操作', slot: 'handleSlot', width: 280},
  ];
  data.buttons = [
    {name: '编辑', icon: 'xiugai', type: 'edit'},
    {name: '删除', icon: 'shanchu', type: 'del'},
    {name: '运行一次', icon: 'ceshi1', type: 'one'},
    {name: '任务详情', icon: 'renwuxiangqing', type: 'detail'},
    {name: '调度日志', icon: 'ziyuanxhdpi', type: 'rizhi'},
  ];
  const handle = (type, row, rowIndex) => {
    switch (type) {
      case 'edit':
        edit(row, rowIndex);
        break;
      case 'start':
        start(row, rowIndex);
        break;
    }
  };
  //编辑
  const edit = (row, rowIndex) => {
    data.dialogConfig.title = '新增';
    data.isShow = true;
    data.editData = row;
  };
  //启动 start
  const start = (row, rowIndex) => {
    proxy.$api.system.startSysTask(row).then(res => {
      if (res.code != -1) {
        proxy.$message({
          type: 'success',
          message: res.msg,
        });
      } else {
        // 关闭对话框
        proxy.$message({
          type: 'success',
          message: res,
        });
      }
    });
  };
  const stop = (row, rowIndex) => {
    proxy.$api.system.stopSysTask(row).then(res => {
      if (res.code != -1) {
        proxy.$message({
          type: 'success',
          message: res.msg,
        });
      } else {
        // 关闭对话框
        proxy.$message({
          type: 'success',
          message: res,
        });
      }
    });
  };
  const changeIsRun = (taskStatus, row, rowIndex) => {
    switch (taskStatus) {
      case '1':
        start(row, rowIndex);
        break;
      case '0':
        stop(row, rowIndex);
        break;
    }
  };
  //停止
</script>

<style lang="scss" scoped>
  .buttons {
    .svg-icon {
      padding-right: 5px;
      font-size: 16px;
    }
    .el-popper.is-customized .el-popper__arrow::before {
      background: linear-gradient(45deg, #b2e68d, #bce689);
      right: 0;
    }
  }
</style>
